<template>
  <ul>
    <li v-for="resultObj in recordResultList" v-if="hasRecord(resultObj)" :key="resultObj.title" class="recordList">
      <div class="dateTitle">
        <span>{{ beautifyDate(resultObj.title) }}</span>
        <span>{{ '￥' + (resultObj.expendAmount != 0 ? resultObj.expendAmount : resultObj.incomeAmount) }}</span>
      </div>
      <div v-for="record in resultObj.items" :key="record.id"
           class="recordResult">
        <span class="labels">{{ record.selectedTagsList.join(',') }}</span>
        <span class="note">{{ record.note }}</span>
        <span class="amount">{{ '￥' + record.amount }}</span>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import dayjs from 'dayjs';
import clone from '@/utils/clone';
import {types} from 'sass';
import Number = types.Number;

@Component
export default class RecordItem extends Vue {

  hasRecord(resultObj) {
    let resultDate = resultObj.title;
    const l: RecordItem[] = [];
    resultObj.items.forEach(record => {
      if (record.date.split(' ')[0] === resultDate && record.type === this.$store.state.record.type) {
        l.push(record);
      }
    });
    return l.length;
  }

  beautifyDate(date: string) {
    const nowDate = dayjs();
    let d = dayjs(date);
    // if(nowDate.year() === d.year() && nowDate.month() === d.month() && nowDate.date() === d.date()){
    if (nowDate.isSame(d, 'year')) {
      if (nowDate.isSame(d, 'month')) {
        if (nowDate.isSame(d, 'day')) {
          return '今天';
        } else if (nowDate.isSame(d.add(1, 'day'), 'day')) {
          return '昨天';
        } else if (nowDate.isSame(d.add(2, 'day'), 'day')) {
          return '前天';
        }
        return d.format('M月D日');
      }
    }
    return d.format('YYYY年M月D日');
  }

  get recordList() {
    return this.$store.state.recordList;
  }

  get recordResultList() {
    const {recordList} = this;

    const newList = clone(recordList)
        .filter(r => r.type === this.$store.state.record.type)
        .sort((a, b) => dayjs(b.date).valueOf() - dayjs(a.date).valueOf());

    const hashTableList = [] as HashTableValue[];
    hashTableList.push({
      title: dayjs(newList[0].date).format('YYYY-MM-DD'),
      items: [newList[0]],
      expendAmount: this.$store.state.record.type === '-' ? newList[0].amount : 0,
      incomeAmount: this.$store.state.record.type === '+' ? newList[0].amount : 0,
    });

    for (let i = 1; i < newList.length; i++) {
      const lastList = hashTableList[hashTableList.length - 1];
      if (dayjs(lastList.title).isSame(dayjs(newList[i].date), 'day')) {
        if (newList[i].type === '-') {
          lastList.expendAmount += newList[i].amount;
        } else {
          lastList.incomeAmount += newList[i].amount;
        }
        lastList.items.push(newList[i]);
      } else {
        hashTableList.push({
          title: dayjs(newList[i].date).format('YYYY-MM-DD'),
          items: [newList[i]],
          expendAmount: newList[i].type === '-' ? newList[i].amount : 0,
          incomeAmount: newList[i].type === '+' ? newList[i].amount : 0
        });
      }
    }
    // this.$emit('getRecordResultList',hashTableList)
    this.$store.state.recordResultList = hashTableList;
    return hashTableList;
  }
}
</script>

<style lang="scss" scoped>
.recordList {
  display: flex;
  flex-direction: column;
  background-color: white;

  .dateTitle {
    display: flex;
    padding: 2px 12px;
    justify-content: space-between;
    font-size: 1.2em;
    background-color: #999;
  }

  .recordResult {
    display: flex;
    padding: 8px;
    text-align: center;
    border: 1px solid #c4c4c4;
    align-items: center;

    > span {
    }

    .labels {
      width: 20%;
    }

    .note {
      width: 60%;
      padding: 0 8px;
      word-wrap: break-word;
      color: #999;
      text-align: left;
    }

    .amount {
      width: 20%;
      word-wrap: break-word;
    }
  }
}
</style>

